import QtQuick 2.0
import QtQuick.Controls 2.0

Button {
    id: btn
    property var backColor: "#7BCBEB"       // 背景颜色
    property var fontPixelSize: 20          // 字体大小
    property var fontColor: "#FFFFFF"

    text: "button"
    implicitWidth: 100
    implicitHeight: 30
    hoverEnabled: true
    contentItem: Label {                    // 设置文本
        id: btnForeground
        text: parent.text
        font.family: "Microsoft Yahei"
        font.pixelSize: fontPixelSize
        color: fontColor
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }
    background: Rectangle {       // 绘制高亮范围
        id: btnBack
        color: backColor
        radius: 6
        Rectangle {
            width: btnBack.width * 0.9
            height: btnBack.height * 0.4
            x:  btnBack.width * 0.05
            y:  btnBack.height * 0.05
            radius: 3
            color:  Qt.lighter(btnBack.color, 1.19)

        }
    }
    onDownChanged: {
        btnBack.color = down ? Qt.lighter(backColor, 0.9) : backColor // 设置按下的背景颜色
    }
    onHoveredChanged: {
        btnBack.color = hovered ? Qt.lighter(backColor, 1.2) : backColor // 设置徘徊的背景颜色
    }
}
